<template>
  <div id="eacharts"></div>
</template>
 
<script>
import * as echarts from 'echarts'
export default {
  name: 'adminNum',
  data(){
    return{
      // 近七天时间
      sevenDay:[],
      // 近七天管理员数据
      sevenData:[0,0,0,0,0,0,0],
    }
  },
  methods:{
    // 绘制图表
    chartOne(){
    // 获取容器
    let myChart = echarts.init(document.getElementById("eacharts"))
    // 绘制图表
    myChart.setOption({
      title: { text: "当前管理员总数" },
      tooltip: {},
      xAxis: {
        data: this.sevenDay,
      },
      yAxis: {},
      series: [
        {
          name: "用户量",
          type: "line",
          data: this.sevenData,
        },
      ],
    })
    },
     // 日期转化
    conversionDate(date){
      let time = new Date(date)
      let y = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+( time.getMonth()+1): time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      let h = time.getHours()<10?"0"+time.getHours():time.getHours()
      let f = time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes()
      let s = time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds()
      return `${month}-${day}`
    },
    // 获取近今天的时间
    getSevenDay(){
      let time = Date.now()
      for(let i=6;i>=0;i--){
        this.sevenDay[i] = this.conversionDate(time)
        time -= 86400000
      }
      this.chartOne()
    },
    // 获取管理员数据
    async getAdminData(){
      let {data} = await this.$axios.get("/admin/administrators/getAll")
      data.data.forEach(item=>{
        for(let i=0;i<7;i++){
          if(this.conversionDate(item.date) === this.sevenDay[i]){
            this.sevenData[i]++
          }
        }
      })
      for(let i=0;i<6;i++){
        this.sevenData[i+1] += this.sevenData[i]
      }
      this.chartOne()
    } 
  },
  mounted(){
    // 获取时间
    this.getSevenDay()
    // 获取管理员
    this.getAdminData()
  }
}
</script>

<style scoped lang='less'>
#eacharts{
  width: 100%;
  height: 100%;
}
</style>